<template>
	<view class="qr-distribution-page">
		<TopBar
			left-icon="/static/user.png"
			scan-icon="/static/saoyisao.png"
			menu-icon="/static/menu.png"
			@menu="toggleMenu"
		/>

		<scroll-view scroll-y class="form-scroll">
			<!-- 返回箭头 -->
			<view class="back-row" @click="goBack">
				<image class="back-arrow-icon" src="/static/left.png" mode="aspectFit" />
			</view>

			<!-- 顶部标题 -->
			<text class="page-title">QR code & Passport</text>

			<!-- 搜索框 -->
			<view class="search-box">
				<image src="/static/search.png" class="search-icon" />
				<input class="search-input" placeholder="Value" />
			</view>

			<!-- 门店信息卡片：Paris store -->
			<view class="store-card">
				<view class="store-left">Paris store</view>
				<view class="store-right">
					<text class="addr-line">123 rue Saint-Honoré</text>
					<text class="addr-line">75001</text>
				</view>
			</view>

			<!-- 分发标题 -->
			<text class="section-title">QR code_Distribution</text>

			<!-- 列表：每行一个，左信息右二维码+UUID，底部导出按钮 -->
			<view class="product-list">
				<view class="product-card" v-for="(item, index) in products" :key="index">
					<!-- 左：信息 -->
					<view class="product-left">
						<view class="product-top">
							<image :src="item.image" class="product-image" mode="aspectFit" />
							<view class="product-info">
								<text class="product-code">{{ item.code }}</text>
								<text class="product-name">T shirt</text>
								<text class="product-units">{{ item.units }} units</text>
							</view>
						</view>
						<view class="product-action">
							<text class="action-btn">Export QR code</text>
						</view>
					</view>
					<!-- 右：二维码 -->
					<view class="product-right">
						<image src="/static/allOrders/Climata QR.png" class="qr-image" mode="aspectFit" />
						<text class="uuid-text">UUID: {{ item.uuid }}</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<CustomTabbar active="import" />

		<AccountMenu
			v-if="showMenu"
			:style="{ '--anchor-top': '70px', '--anchor-right': '0px' }"
			@close="closeMenu"
			@select="closeMenu"
		/>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import TopBar from '@/components/TopBar.vue'
import AccountMenu from '@/components/AccountMenu.vue'
import CustomTabbar from '@/components/CustomTabbar.vue'

const showMenu = ref(false)
const toggleMenu = () => { showMenu.value = !showMenu.value }
const closeMenu = () => { showMenu.value = false }
const goBack = () => { uni.navigateTo({ url: '/pages/brand/distribution-paris-unchecked' }) }

const products = ref([
  { code: '46DC85241', units: 100, image: '/static/record/type1.png', uuid: '550e8400-e29b-41d4-a716-446655440000' },
  { code: '46DC85242', units: 50,  image: '/static/record/type2.png', uuid: '552e8400-e29b-41d4-a716-446655440001' },
  { code: '46DC85243', units: 100, image: '/static/record/type3.png', uuid: '552b8400-e29b-41d4-a716-446655440002' },
  { code: '46DC85244', units: 100, image: '/static/record/type4.png', uuid: '553e8400-e29b-41d4-a716-446655440003' },
  { code: '36DC76541', units: 100, image: '/static/record/type5.png', uuid: '673e8400-e29b-41d4-a716-446655440004' },
  { code: '36DC76542', units: 100, image: '/static/record/type6.png', uuid: '675e8400-e29b-41d4-a716-446655440005' },
])
</script>

<style lang="scss">
.qr-distribution-page { min-height: 100vh; background: linear-gradient(180deg, #d9f0ff 0%, #e9f9ed 100%); }
.form-scroll { margin-top: 60px; padding: 0 16px 84px 16px; box-sizing: border-box; }
.back-row { margin: 12px 0 0 -8px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.back-arrow-icon { width: 24px; height: 24px; }
.page-title { display: block; margin: 0 4px 8px; font-size: 18px; font-weight: 800; color: #0b1e2a; }
.search-box { height: 44px; background: #fff; border-radius: 24px; display: flex; align-items: center; padding: 0 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin: 8px 0 12px; }
.search-icon { width: 16px; height: 16px; margin-right: 6px; }
.search-input { flex: 1; text-align: left; font-size: 14px; color: #333; }
.store-card { display: flex; align-items: center; justify-content: space-between; background: #eaf6ff; border-radius: 12px; padding: 10px 12px; margin: 0 4px 12px; }
.store-left { font-size: 14px; font-weight: 700; color: #0b1e2a; }
.store-right { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.addr-line { font-size: 12px; color: #0b1e2a; }
.section-title { display: block; margin: 12px 4px 14px; font-size: 16px; font-weight: 700; color: #0b1e2a; }

.product-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.product-card { background: #e7f5f7; border-radius: 12px; padding: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.08); display: flex; align-items: flex-start; gap: 12px; }
.product-left { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-top { display: flex; align-items: flex-start; gap: 8px; }
.product-image { width: 50px; height: 50px; border-radius: 8px; background: #fff; flex-shrink: 0; }
.product-info { display: flex; flex-direction: column; gap: 2px; }
.product-code { font-size: 14px; font-weight: 700; color: #0b1e2a; }
.product-name { font-size: 13px; color: #0b1e2a; }
.product-units { font-size: 12px; color: #0b1e2a; font-weight: 600; }
.product-action { display: flex; justify-content: flex-start; }
.action-btn { background: #23323a; color: #fff; border-radius: 8px; padding: 6px 14px; font-size: 11px; font-weight: 600; text-align: center; }
.product-right { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; min-width: 90px; }
.qr-image { width: 85px; height: 85px; }
.uuid-text { font-size: 9px; color: #0b1e2a; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; line-height: 1.2; }
</style>


